<template>
  <div class="mainDiv">
    <div  v-for="(page ,index) in content"   :key="index">
      <div class="page-con" v-loading="page.loading">
        <div class="info-con"  v-for="item in page" :key="item.id" v-if="!page.loading">
            <div class="avatar">
              <router-link :to='{name:"UserRoute",params:{name:item.author.loginname}}'>
                <img :src="item.author.avatar_url" :title="item.author.loginname" alt="">
              </router-link>
            </div>
            <div class="info">
              <router-link :to='{name:"ArticleRoute",params:{id:item.id}}'>{{item.title}}'</router-link>
              <span>回复: {{item.reply_count}}</span>
              <span> 创建于: {{item.create_at | date}}</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import vue from 'vue';
  export default {
    name: "main-sec",
    data(){
      return {
        content:[],
        page:0,
        limit: 10,
        loading: true,
      }
    },
    filters:{
      date(v){
        return v.substring(0,10) + " " + v.substring(11,18)
      }
    },
    methods:{
      scrollMethod(){
        const sumH = document.body.scrollHeight || document.documentElement.scrollHeight;
        const viewH = document.documentElement.clientHeight;
        const scrollH = document.body.scrollTop || document.documentElement.scrollTop;
        var page = this.content[this.page -1];
        if (viewH + scrollH >= sumH && page && page.loading === undefined) {
          this.getData();
        }
      },
      getData(){
        this.page += 1;
        vue.set(this.content,this.page-1,{loading:true});
        this.$http({
          url: 'https://cnodejs.org/api/v1/topics',
          method: 'get',
          params: {
            page: this.page,
            limit: this.limit,
            mdrender: 'false',
          },
        }).then((res) => {
          vue.set(this.content,this.page -1,res.data.data);
        }).catch((res) => {
          console.log('MaiSec.vue: ', res);
        });
      },

    },
    created() {
      this.getData();
    },
    mounted:function(){
      window.addEventListener("scroll",this.scrollMethod)
    },
    watch: {

    },
  }
</script>

<style scoped>
  a{
    font-family: 微软雅黑;
    font-weight: bold;
    display: block;
    text-decoration:none;
    color: #34b56c;

  }
  a:visited{
    color: #8ba88c;
  }
  a:hover{
    color:forestgreen;
  }
.mainDiv{
  border:1px solid lightgrey;
  padding:1rem;
  width:60%;
  height:100%;
  background-color: #ebf6ff;
}

 .page-con{
   margin-top:1rem;
   width:100%;
   height:70rem;
 }
  .info-con{
    position:relative;
    display: flex;
    border-bottom: 2px solid lightblue;
    width:100%;
    height:10%;
  }
  .avatar{
    display: flex;
    align-items: center;
    justify-content: center;
    width:10rem;
    height:100%;
  }
  .info{
    padding:1.5rem 0rem;
    height:100%;
  }
  .avatar img{
    width:5rem;
    height:5rem;
  }
  .info span{
    padding-right:1rem;
    line-height:3rem;
    color:lightgrey;
  }
</style>
